<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>

  <!-- 
    Vue中2种数据绑定的方式：
      1. 单向绑定 v-bind：数据只能从data流向页面
      2. 双向绑定 v-model：数据不仅能从data流向页面，还可以从页面流向data
        备注：
          1. 双向绑定一般都应用于表单元素上 如input、select等
          2. v-model:value 可以简写为v-model。因为v-model默认收集的就是value值
   -->

  <div id="root">
    单向数据绑定：<input type="text" :value="name">
    <hr>
    双向数据绑定：<input type="text" v-model="name">
  </div>
  <script>
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        name: 'ccc'
      }
    })
  </script>
</body>

</html>